<template>
  <div class='container'>
    <div class="bbbe">
      <!-- 搜索区域 -->
      <div class="dingbu">
        <el-form :inline="true" ref="form" :model="q" label-width="80px">
          <el-form-item label="关键字">
            <el-input style="width:180px" v-model="q.keyword" placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="q.state" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="addqingchu">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="tableAll">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="butt3" type="success" @click="dialogTableVisible = true">新增技巧</el-button>
          </el-form-item>
        </el-form>

      </div>

      <div class="divsss">
        <i class="el-icon-info"></i>
        <span>数据一共{{counts}}条</span>
      </div>

      <!-- 表格区 -->
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" label="序号" width="64">
          </el-table-column>
          <el-table-column label="文章标题" width="430">
            <template v-slot="{row}">
              {{row.title}}

              <a class="el-icon-film" href="javascript:;" v-if="row.videoURL" @click="open(row)">
              </a>
            </template>
          </el-table-column>
          <el-table-column prop="visits" width="160" label="阅读人数">
          </el-table-column>
          <el-table-column prop="username" width="160" label="录入人">
          </el-table-column>
          <el-table-column width="160" label="录入时间">
            <template v-slot="{row}">
              {{$dateFormat(row.createTime)}}
            </template>
          </el-table-column>
          <el-table-column prop="state" width="160" label="状态" :formatter="Formatter">

          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="addyulan(row)">预览</el-button>
              <el-button type="text" size="small" @click="addjinyong(row)">{{Formatter2(row)}}</el-button>
              <el-button type="text" size="small" @click="addxiugai(row)" :disabled='row.state===1?false:true'>修改</el-button>
              <el-button type="text" size="small" @click="addshanchu(row)" :disabled='row.state===1?false:true'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <el-pagination :total="counts" @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="q.page" :page-size="q.pagesize" :page-sizes="[2,3,5,10]" background layout="->,total,sizes,prev,pager,next,jumper">
      </el-pagination>
    </div>

    <!-- 新增弹框 -->
    <el-dialog @close="closeddd" :visible.sync="dialogTableVisible" title="新增文章">
      <el-form :rules="rules" :model="kuangform" ref="zzref">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="kuangform.title" :value="input" autocomplete="off" placeholder="请输入文章内容"></el-input>
        </el-form-item>

        <el-form-item prop="articleBody" label="文章内容">
          <quill-editor v-model="kuangform.articleBody"></quill-editor>
        </el-form-item>

        <el-form-item v-model="kuangform.videoURL" label="视频地址">
          <el-input v-model="kuangform.videoURL" autocomplete="off" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="adddleOK">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog @close="closexiugai" :visible.sync="dialogTableVisible2" title="修改文章">
      <el-form :rules="rules" :model="kuangform" ref="ssref">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="kuangform.title" :value="input" autocomplete="off" placeholder="请输入文章内容">{{kuangform.title}}</el-input>
        </el-form-item>

        <el-form-item prop="articleBody" label="文章内容">
          <quill-editor v-model="kuangform.articleBody">{{kuangform.articleBody}}</quill-editor>
        </el-form-item>

        <el-form-item v-model="kuangform.videoURL" label="视频地址">
          <el-input v-model="kuangform.videoURL" autocomplete="off" placeholder="请输入视频地址">{{kuangform.videoURL}}</el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addbianjiOK">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 预览弹框 -->
    <el-dialog :visible.sync="dialogchakan" title="预览文章">
      <div class="tablechakan-title">{{tablechakan.title}}</div>
      <div class="tablechakan-createTime">
        <span class="tablechakan-createTime">{{tablechakan.createTime}}</span>
        <span class="chaojiguanliyuan">超级管理员</span>
        <span>
          <i class="el-icon-view"></i>
          {{tablechakan.visits}}</span>
      </div>
      <div class="articleBody">{{articleBody}}</div>
    </el-dialog>

    <el-dialog :visible.sync="dialogVadeo">
      <video src="#" class="video">

      </video>
    </el-dialog>

  </div>
</template>

<script>
import { list, add, detail, changeState, update, remove } from '@/api/hmmm/articles.js'
import { status } from '@/api/hmmm/constants.js'
export default {
  data () {
    return {
      status: status,
      q: {
        page: 1, // 第几页,默认第一页
        pagesize: 10, // 一页显示几条,默认显示10条
        keyword: '',
        state: null

      },
      // 表单验证规则
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 新增弹框数据
      kuangform: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 表格数据
      tableData: [],
      // 新增弹框
      dialogTableVisible: false,
      dialogchakan: false,
      dialogTableVisible2: false,
      dialogVadeo: false,
      counts: 0,
      input: '',
      articleBody: '',
      // 查看数据表
      tablechakan: {}
    }
  },
  created () {
    this.tableAll()
  },

  methods: {
    open (row) {
      this.$alert('<vadeo url:"row.videoURL"></vadeo>', 'HTML 片段', {
        dangerouslyUseHTMLString: true
      })
    },
    // 删除
    addshanchu (row) {
      this.$confirm('确认删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const ret = await remove(row)
          if (ret.status === 200) {
            this.tableAll()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        } catch (err) {
          console.log(err)
          this.$message.error('删除失败')
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改弹框确定
    async addbianjiOK () {
      try {
        const ret = await update(this.kuangform)
        if (ret.status === 200) {
          // console.log(ret)
          this.dialogTableVisible2 = false
          this.tableAll()
          this.$message.success('修改成功')
        }
      } catch {
        this.$message.error('修改失败')
      }
    },
    // 修改弹框
    async addxiugai (row) {
      const ret = await detail(row)
      if (ret.status === 200) {
        // console.log(ret)
        this.kuangform = ret.data
        this.dialogTableVisible2 = true
      }
    },
    Formatter2 (row) {
      const info = this.status.find(item => parseInt(item.value) === parseInt(row.state))
      if (info.value === 1) {
        return '禁用'
      } else {
        return '启用'
      }
    },
    Formatter (row) {
      const info = this.status.find(item => parseInt(item.value) === parseInt(row.state))
      if (info) {
        return info.label
      }
    },
    // 禁用/启用
    async addjinyong (row) {
      try {
        const ret = await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })
        console.log(ret)
        this.tableAll()
        this.$message.success('操作成功')
      } catch {
        this.$message.error('操作失败')
      }
    },
    // 预览
    async addyulan (id) {
      console.log(id)
      const ret = await detail(id)
      if (ret.status === 200) {
        // console.log(ret)
        this.dialogchakan = true
        this.tablechakan = ret.data
        this.articleBody = ret.data.articleBody.replace(/<[^>]+>/g, '')
      }
    },
    // 新增弹框关闭时
    closeddd () {
      this.$refs.zzref.resetFields()
    }, // 修改弹框关闭时
    closexiugai () {
      this.$refs.ssref.resetFields()
    },
    // 新增弹框确认
    adddleOK () {
      this.$refs.zzref.validate(async valid => {
        if (!valid) {
          return this.$message.error('请完善信息')
        }
        // console.log('123')
        const ret = await add(this.kuangform)
        // console.log(ret)
        if (ret.status === 200) {
          this.$message.success('新增技巧成功!')
          this.dialogTableVisible = false
          this.tableAll()
        }
      })
    },
    // 页码发生变化的时候
    handleCurrentChange (val) {
      this.q.page = val
      this.tableAll()
    },
    // 每页条数发生变化
    handleSizeChange (val) {
      console.log(val)
      this.q.pagesize = val
      this.tableAll()
      this.kuangform.resetFields()
    },
    // 获取文章列表
    async tableAll () {
      const ret = await list(this.q)
      if (ret.status === 200) {
        console.log(ret)
        this.tableData = ret.data.items
        this.counts = ret.data.counts
      }
    },
    // 清除按钮
    addqingchu () {
      this.q = this.$options.data().q
    }

  }

}
</script>

<style  lang="scss">
.video {
  width: 100px;
  height: 100px;
  background-color: #666;
}
.chaojiguanliyuan {
  margin: 0 10px 0 10px;
}
.bbbe {
  width: 100%;
  margin: 10px;
  background-color: #fff;
  .span00 {
    margin-right: 10px 20px 10px 10px;
    font-size: 14px;
  }
  .dingbu {
    padding: 20px 60px 0px 20px;
  }
  .butt3 {
    margin-left: 400px;
  }
  .divsss {
    height: 30px;
    line-height: 30px;
    background-color: #f4f4f5;
    margin: 0 20px;
    .el-icon-info {
      margin: 0 10px 0 10px;
    }
  }
  .el-table--enable-row-hover {
    margin: 30px 0 0 30px;
  }
  .quill-editor {
    display: inline-block;
  }
}
.ql-editor {
  height: 200px !important;
}
.quill-editor {
  margin-top: 38px;
}
.tablechakan-title {
  font-size: 20px;
  color: #606266;
  font-weight: 600;
}
.tablechakan-createTime {
  height: 50px;
  line-height: 50px;
  margin-left: 10px;
}
.articleBody {
  font-size: 16px;
  padding: 10px 0 60px 20px;
  background-color: #f5f5f5;
  border-top: 1px dashed #ccc;
}
.el-pagination__jump {
  margin-right: 40px;
}
.el-icon-film {
  color: #00f !important;
}
.el-link--default {
  text-decoration: none !important;
}
</style>
